<template>
  <el-carousel trigger="click" height="380px" v-if="list.length" :interval="4000">
    <el-carousel-item v-for="(item, index) of list" :key="index">
      <div class="img-box" @click="openNew(item)">
        <img :src="item.coverUrl" class="img" alt="">
        <div class="img-title">
          <div class="title">{{item.name}}</div>
        </div>
      </div>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
import { advertsList } from '@/api/api';

export default {
  props: ['pageType'],
  data() {
    return {
      list: []
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    openNew (item) {
      window.open(item.linkUrl)
    },
    async getList() {
      const params = {
        type: 'LB_BANNER',
        pageType: this.pageType
      };
      const res = await advertsList(params);
      const list = res.list.filter(item => {
        return item.status === 1
      });
      this.list = list;
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-carousel__arrow {
  font-size: 24px;
  font-weight: bold;
  background: rgba(31,45,61,.51);
}
.img-box {
  width: 760px;
  height: 380px;
  background-size: cover;
  position: relative;
  cursor: pointer;
  .img {
    width: 760px;
    height: 380px;
    transform: scale(1);
    transition: all 1s;
    &:hover {
      transform: scale(1.12);
      transition: all 1s;
    }
  }
  .img-title {
    width: 100%;
    padding: 20px 20px 40px;
    background: linear-gradient(-180deg,transparent,rgba(0,0,0,.65) 97%);
    position: absolute;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    .title {
      font-size: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 28px;
      max-height: 56px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      word-break: break-all;
    }
  }
}
/deep/ .el-carousel__indicators--horizontal {
  left: 20px;
  bottom: 20px;
  transform: translateX(0);
  .el-carousel__indicator--horizontal {
    padding: 0 4px;
    .el-carousel__button {
      width: 8px;
      height: 8px;
      border-radius: 8px;
      background-color: rgba($color: #ffffff, $alpha: 0.51);
    }
    &.is-active {
      .el-carousel__button {
        background-color: #D42A31;
      }
    }
  }
}
</style>